<template>
	<view>
		<uni-popup ref="stockPef" type="right">
			<view class="pop">
				<view class="top">
				<icon class="close-btn" type="clear" size="26" @click="close" />
				</view>
				<scroll-view class="scroll-height" scroll-y="true">
					<view class="list">
						<view v-for="(data, index) in indata" class="list-item">
							<text class="list-item-name" :class="{error: data.error}">{{ data.materialName }}</text>
							<view class="list-item-val">
								<view class="nowrap">
									<text class="val-title">编码</text><span class="font">：</span>
									<text class="val-content">{{ data.fmaterialnumber || "-" }}</text>
								</view>
								<view class="nowrap" v-if="data.fmaterialname">
									<text class="val-title">名称</text><span class="font">：</span><text
										class="val-content">{{ data.fmaterialname }}</text>
								</view>
								<view class="nowrap" v-if="data.flocationname">
									<text class="val-title">仓位</text><span class="font">：</span><text
										class="val-content">{{ data.flocationname}}</text>
								</view>
								<view class="nowrap" v-if="data.finfactqty">
									<text class="val-title">数量</text><span class="font">：</span><text
										class="val-content">{{ data.finfactqty }}</text>
								</view>
								
							</view>
							
						</view>
					</view>
					
				</scroll-view>
			</view>
			
		</uni-popup>
		
	</view>
	
	
</template>

<script>

import uniList from 'uni_modules/uni-list/components/uni-list/uni-list.vue';
	import uniListItem from 'uni_modules/uni-list/components/uni-list-item/uni-list-item.vue';
	export default {
		components: {
			
			uniList,
			uniListItem
		},
	
		emits: ['delete', ],
		props: {
			hiddenDelete: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				type: null,
				title: '',
				billNo : '',
				visible: false,
				type: 'center',
				indata: []
				
			
			}
		},
		computed: {
			
		},
		methods: {
			/**
			 * 开启
			 */
		/**
		 * 开启
		 */
		open(data) {
			let {
				title,
				indata = [],
				type = 'inStock',
				errorList = []
			} = data;
			if (errorList && errorList.length > 0) {
				errorList.forEach((item) => {
					let index = indata.findIndex((element) => {
						return element.boxNo === item
					})
					if (index > -1) {
						indata[index].error = true
					}
				})
			}
			
			this.title = title;
			this.indata = indata;
			
			this.type = type;
			this.$refs.stockPef.open('right')
			this.billNo = data.billNo
		},


		/**
		 * 关闭画面
		 */
		close() {
			this.$refs.stockPef.close()
		},
			
		}
	}
</script>

<style lang="scss" scoped>
	.pop {
		display: flex;
		flex-direction: column;
		width: 600rpx;
		padding-top: 6px;
		background-color: white;
		/* #ifdef APP-PLUS */
		height: 100vh;
		/* #endif */
		/* #ifndef APP-PLUS */
		height: calc(100vh - 44px);
		/* #endif */
	}

	.top {
		height: 40px;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		border-bottom: 1px solid #F1F1F1;
		padding-left: 10px;
		padding-bottom: 10px;
		position: relative;
	}

	

	.close-btn {
		display: flex;
		flex-direction: column;
		position: absolute;
		right: 20px;
	}
	
	.scroll-height {
		/* #ifdef APP-PLUS */
		height: calc(100vh - 80px);
		/* #endif */
		/* #ifndef APP-PLUS */
		height: calc(100vh - 44px - 80px);
		/* #endif */
	}

	.list {
		padding: 0 10px 10px;
		box-sizing: border-box;
	}

	.list-item {
		display: flex;
		flex-direction: column;
		position: relative;
		border-bottom: 1px solid #F1F1F1;
		padding: 10px;
	}

	.item-delete-btn {
		display: flex;
		flex-direction: column;
		position: absolute;
		right: 10px;
		top: 10px;
	}

	.list-item-name {
		width: calc(100%);
		display: flex;
		flex-direction: column;
		font-size: 14px;
		margin-bottom: 10px;
	}

	.list-item-val {
		display: flex;
		flex-direction: column;
	}

	.val-title {
		display: flex;
		flex-direction: column;
		font-size: 14px;
		color: $font-hc;
		min-width: 100rpx;
		text-align-last: justify;

		&.pt {
			padding-top: 8rpx;
		}
	}

	.font {
		color: $font-hc;
	}

	.val-traceBack {}

	.val-traceBack-item {
		display: flex;
		align-items: center;
		background-color: #f5f5f5;
		margin: 0 0 10rpx 0;
		padding: 8rpx 10rpx;
		border-radius: 10rpx;
	}

	.val-traceBack-item .value {
		margin-right: 20rpx;
	}

	.val-content {
		display: flex;
		flex-direction: column;
		font-size: 14px;
		margin-right: 12px;
	}

	.nowrap {
		display: flex;
		// align-items: center;
		flex-direction: column;
		font-size: 14px;
		margin-bottom: 4px;
		flex-direction: row;
	}

	.error {
		display: flex;
		flex-direction: column;
		color: red
	}
</style>
